<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
    <defs>
      <symbol id="circle" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
        <circle cx="50" cy="50" r="50"></circle>
      </symbol>
      <symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice">
        <polygon points="0 0, 100 0, 50 100"></polygon>
      </symbol>
    </defs>
    <g stroke="grey" fill="none">
      <rect x="0" y="0" width="50" height="100"></rect>
      <rect x="100" y="0" width="50" height="100"></rect>
    </g>
    <use xlink:href="#circle" width="50" height="100" fill="red"></use>
    <use xlink:href="#triangle" width="50" height="100" fill="red" x="100"></use>
  </svg>
</body>
</html>